<script setup lang="ts">
import { onMounted, ref } from 'vue';

// 1. 创建 ref 对象
// 3. 补充类型，类型可以参考 document.querySelector() 的返回值类型
const h1Ref = ref<HTMLHeadingElement | null>(null)
console.log(h1Ref.value) // null，组件的DOM节点还没开始挂载

onMounted(() => {
  // 鼠标悬停看 querySelector 的返回值类型
  const h1Dom = document.querySelector('h1')
  console.log(h1Dom)

  console.log('onMounted', h1Ref.value)
  // 调用 DOM 元素的方法 append()
  h1Ref.value?.append('!!!')
})

</script>
<template>
  <!-- 2. 绑定 ref 对象 -->
  <h1 ref="h1Ref">这是一个h1</h1>
</template>
<style></style>